<template>
  <button @click="btn">点击我改变颜色</button>
 <!-- 其中attributeName和dl都要为变量否则是没有效果的或者dl会被默认为null或者undefind -->
  <div v-bind:[attributeName]="dl"></div>
  <h1>{{attributeName}}</h1>
</template>

<script>
export default {
  name: "myDev",
  data() {
    return {
      attributeName: "class",
      dl:"dl"
    };
  },
  methods: {
    btn: function () {
      this.attributeName = "id";
      console.log(this.attributeName)
    },
  },
};
</script>

<style>
#dl {
  height: 200px;
  width: 200px;
  background-color: yellow;
}
.dl {
  height: 200px;
  width: 200px;
  background-color: rgb(0, 255, 76);
}
/* #dev{
  height: 200px;
  width: 200px;
  background-color: rgb(66, 152, 152);
  display: block;
} */
</style>